<template>
	<view class="verify iphone-safe-area">
		<!-- #ifdef  MP-WEIXIN -->
		<view class="scan">
			<image :src="$util.img('public/uniapp/shop_uniapp/verify/verify.png')" mode="aspectFit" @click="scanCode()">
			</image>
			<view class="tip color-tip">点击此区域扫描核销码</view>
		</view>
		<!--  #endif -->

		<view class="shop_base_info color-base-bg">
			<view class="shop_info margin-left">
				<view class="shop_title">
					<text class="user-name">{{ userInfo.username }}</text>
					<text class="group-name color-base-text" v-if="userInfo.group_name">{{ userInfo.group_name }}</text>
				</view>
			</view>

			<!-- 隐藏扫码核销按钮(此按钮跳转到当前核销台页面) -->
			<!-- 			<text class="weixincode iconfont iconrichscan_icon"
				@click.stop="$util.redirectTo('/pages/verify/index')"></text> -->

			<text class="weixincode" style="font-size: 26rpx;" @click.stop="logout()">切换用户</text>

		</view>

		<view class="menu_item">
			<view class="menu_title">
				<view>
					<text class="line color-base-bg margin-right"></text>
					<text>输入核销码</text>
				</view>
				<view class="recode color-base-text" @click="$util.redirectTo('/pages/verify/records')">核销记录</view>
			</view>
			<view class="menu_content">
				<input placeholder="请输入核销码" v-model="verify_code" class="uni-input" @confirm="search()" />
				<button type="primary" :disabled="verify_code == ''" @click="search">点击查询</button>
			</view>
		</view>
		<view v-if="search_info && item_array && item_array.length > 0">
			<view class="list">
				<view class="goods" v-for="(item_c, index) in item_array" :key="index">
					<image class="img" :src="$util.img(item_c.img)" mode="aspectFit" @error="imgError(index)"></image>
					<view class="info">
						<view class="goods_name">{{ item_c.name }}</view>
						<view class="flex">
							<view class="flex_left">x{{ item_c.num }}</view>
							<view class="flex_right">
								<text class="font-size-tag">￥</text>
								{{ item_c.price }}
							</view>
						</view>
					</view>
				</view>
				<view class="other_info" v-for="(item_r, index_r) in remark_array" :key="index_r">
					{{ item_r.title }}：{{ item_r.value }}
				</view>
			</view>
			<button type="primary" style="margin-top: 40rpx" @click="verify">确认核销</button>
			<button type="default" style="margin-top: 20rpx" @click="reset">重置</button>
		</view>

		<view v-else style="width: 100%;text-align: center;color: #aaa;margin: 48rpx 0 0 0;">请输入核销码，点击查询</view>

	</view>
</template>

<script>
	import Weixin from '@/common/js/wx-jssdk.js';
	import Http from '@/common/js/http.js'
	export default {
		data() {
			return {
				verify_code: '',
				search_info: '',
				item_array: [],
				remark_array: [],

				// 核销台新增用户信息
				userInfo: {},
			};
		},
		onShow() {
			if (!this.$util.checkToken('/pages/verify/index')) return

			// 核销台新增用户信息
			this.userInfo = uni.getStorageSync('user_info') ? JSON.parse(uni
				.getStorageSync('user_info')) : {}

		},

		async onLoad() {
			await this.initData()
		},

		methods: {

			// 初始化数据
			async initData() {
				// 获取店铺信息(包含用户信息)
				Http.sendRequest({
					url: '/shopapi/shop/shopInfo',
					success: res => {
						let data = res.data
						if (res.code == 0 && data) {
							uni.setStorageSync('shop_info', JSON.stringify(data.shop_info))
							uni.setStorageSync('user_info', JSON.stringify(data.user_info))

							// 核销台新增用户信息
							this.userInfo = uni.getStorageSync('user_info') ? JSON.parse(uni
								.getStorageSync('user_info')) : {}
						}
					}
				})
			},

			// 切换用户
			logout() {

				uni.showModal({
					title: '提示',
					content: '是否确认切换用户？',
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync('token')
							uni.removeStorageSync('site_id')
							uni.removeStorageSync('shop_info')
							uni.removeStorageSync('user_info')
							uni.removeStorageSync('shopPackage')
							uni.removeStorageSync('openInfo')
							uni.removeStorageSync('bankInfo')
							uni.removeStorageSync('renewObj')
							uni.removeStorageSync('menuPermission')
							this.$util.redirectTo('/pages/login/login')
						} else if (res.cancel) {

						}
					}
				})

			},

			search() {
				this.$api.sendRequest({
					url: '/shopapi/verify/verifyCard',
					data: { verify_code: this.verify_code },
					success: res => {
						if (res.code >= 0 && res.data) {
							this.search_info = res.data
							this.item_array = res.data.data.item_array
							this.remark_array = res.data.data.remark_array
						} else {
							this.remark_array = []
							this.item_array = []
							this.$util.showToast({ title: res.message })
						}
					}
				});
			},

			// 重置
			reset() {
				this.verify_code = ''
				this.item_array = []
			},

			// 核销
			verify() {

				uni.showModal({
					title: '提示',
					content: '是否确认进行核销？',
					success: res => {
						if (res.confirm) {
							this.$api.sendRequest({
								url: '/shopapi/verify/verify',
								data: { verify_code: this.verify_code },
								success: res => {
									var that = this
									this.$util.showToast({ title: res.message })
									if (res.code >= 0) {
										setTimeout(() => {
											that.$util.redirectTo('/pages/verify/records')
										}, 1000)
									}
								}
							})
						} else if (res.cancel) {
							uni.showToast({ title: '已取消', icon: 'none' })
						}
					}
				})

			},

			scanCode() {
				// #ifdef H5
				if (!this.$util.isWeiXin()) {
					this.$util.showToast({ title: 'H5端不支持扫码核销' })
					return
				}
				// #endif
				// #ifdef MP
				uni.scanCode({
					onlyFromCamera: true,
					success: res => {
						if (res.scanType == 'WX_CODE' && res.errMsg == 'scanCode:ok') {
							try {
								var code = this.getQueryVariable(res.path, 'code');
								this.verify_code = code;
								this.search();
							} catch (e) {
								this.$util.showToast({ title: e.message })
							}
						} else if (res.scanType == 'QR_CODE' && res.errMsg == 'scanCode:ok') {
							var code = this.getQueryVariable(res.result, 'code')
							this.verify_code = code
							this.search()
						} else {
							this.$util.showToast({
								title: res.errorMsg ? res.errorMsg : '请扫描小程序二维码'
							});
						}
					}
				});
				// #endif
				// #ifdef H5
				if (this.$util.isWeiXin()) {
					if (uni.getSystemInfoSync().platform == 'ios') {
						var url = uni.getStorageSync('initUrl')
					} else {
						var url = location.href;
					}
					this.$api.sendRequest({
						url: '/wechat/api/wechat/jssdkconfig',
						data: { url: url },
						success: jssdkRes => {
							if (jssdkRes.code == 0) {
								var wxJS = new Weixin();
								wxJS.init(jssdkRes.data);
								wxJS.scanQRCode(res => {
									if (res.resultStr) {
										location.href = res.resultStr;
									}
								})
							} else {
								this.$util.showToast({ title: jssdkRes.message })
							}
						}
					});
				}
				// #endif
			},
			getQueryVariable(url_val, name) {
				var url = url_val;
				var arrObj = url.split('?');
				if (arrObj.length > 1) {
					var arrPara = arrObj[1].split('&')
					var arr
					for (var i = 0; i < arrPara.length; i++) {
						arr = arrPara[i].split('=');
						if (arr != null && arr[0] == name) {
							return arr[1]
						}
					}
					return ''
				} else {
					return ''
				}
			},
			imgError(index) {
				this.item_array[index].img = this.$util.getDefaultImage().default_goods_img
				this.$forceUpdate()
			}
		}
	};
</script>

<style lang="scss">
	.verify {
		padding: 1px 0;
	}

	.scan {
		text-align: center;
		padding: 30rpx;
		margin: 30rpx $margin-both;
		background-color: #fff;
		border-radius: $border-radius;

		image {
			width: 300rpx;
			height: 300rpx;
		}

		.recode {
			text-align: right;
			margin-bottom: 30rpx;
		}

		.tip {
			margin-top: 20rpx;
		}
	}

	.menu_item {
		margin: 30rpx $margin-both 0;
		padding-top: 25rpx;
		padding-bottom: 30rpx;

		.menu_title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: $font-size-toolbar;
			font-weight: bold;
			margin-bottom: 10rpx;

			.line {
				display: inline-block;
				height: 28rpx;
				width: 4rpx;
				border-radius: 4rpx;
			}
		}

		.menu_content {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: $border-radius;

			.uni-input {
				flex: 1;
				padding: 0 30rpx;
			}

			button {
				border-radius: $border-radius;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				margin: 0;
			}
		}
	}

	.list {
		background-color: #fff;
		margin: 0 $margin-both $margin-both;
		padding: 0 30rpx 20rpx;
		border-radius: $border-radius;

		.title {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			font-size: $font-size-tag;
			border-bottom: 1px solid $color-line;

			.time {
				flex: 1;
				color: $color-tip;
			}

			.status {
				margin-left: 30rpx;
			}
		}

		.goods {
			display: flex;
			padding: 30rpx 0;

			.img {
				height: 140rpx;
				width: 140rpx;
				min-width: 140rpx;
			}

			.info {
				flex: 1;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods_name {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 2; //
					line-height: 1.5;
				}

				.flex {
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.flex_left {
						font-size: $font-size-tag;
						color: $color-tip;
					}
				}
			}
		}

		.other_info {
			color: $color-tip;
			font-size: $font-size-tag;
		}
	}

	.shop_base_info {
		display: flex;
		align-items: center;
		color: #fff;
		margin: 30rpx $margin-both;
		padding: 30rpx 0;
		border-radius: $border-radius;

		.shop_info {
			flex: 1;

			.shop_title {
				color: #fff;
				font-size: $font-size-toolbar;
				font-weight: 600;

				text {
					vertical-align: middle;
					display: inline-block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.user-name {
					max-width: 300rpx;
				}

				.group-name {
					font-size: $font-size-goods-tag;
					margin-left: $margin-updown;
					border: 1px solid #fff;
					background-color: #fff;
					border-radius: 50rpx;
					padding: 0 14rpx;
					height: 36rpx;
					line-height: 36rpx;
					font-weight: 400;
					max-width: 200rpx;
				}
			}

			.shop_other_info {
				color: #fff;
				margin-top: 10rpx;
				font-size: $font-size-tag;
			}
		}

		.weixincode {
			margin: 0 $margin-both;
			font-size: 36rpx;
			color: #fff;
		}
	}
</style>